<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1 {
				text-align: center;
			}

			#formDiv {
				width: 300px;
				background-color: lightblue;
				margin: 0px auto;
			}
		</style>
	</head>
	<body>

		<h1>用户注册</h1>
		<div id="formDiv">
			<form>
				<table border="1" style="width: 100%;">
					<tr>
						<td>
							用户名:</td>
						<td><input type="text" id="nameInput" /></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password" id="passInput" /><br /></td>
					</tr>
					<tr>
						<td colspan="2" style="text-align: center;">
							<button type="button" onclick="check()">检测</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<script>
			// 综合:
			// 1. 编写一个用户注册页面
			//   用户名		英文开头，英文数字，长度6-20
			//   密码		6-20位 英文、数字或下划线
			//   邮箱		
			//   电话号码			
			//   生日   	2000-1-1 或 2000/1/1
			// 添加一个按钮检测用户注册信息是否符合			
			function check() {
				console.log("check");
				var name = document.getElementById("nameInput").value;
				var pass = document.getElementById("passInput").value;

				var re = /^[a-z][a-z0-9]{5,19}$/i;
				if (name.match(re)) {
					alert("用户名符合要求");
				} else {
					alert("用户名不符合要求");
				}
			}
		</script>
	</body>
</html>
